<template>
  <div class="fluid container">
    <div class="form-group form-group-lg panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Sortable control</h3>
      </div>
      <div class="panel-body">
        <div class="checkbox">
          <label>
            <input type="checkbox" v-model="editable" />Enable drag and drop
          </label>
        </div>
        <button type="button" class="btn btn-default" @click="orderList">Sort by original order</button>
      </div>
    </div>

    <a-row :gutter="20">
      <a-col :span="6">
        <div class="col-md-3">
          <draggable
            class="list-group"
            tag="ul"
            v-model="list"
            v-bind="dragOptions2"
            :move="onMove"
            @start="isDragging=true"
            @end="isDragging=false"
          >
            <transition-group type="transition" :name="'flip-list'">
              <li class="list-group-item" v-for="element in list" :key="element.order">
                <i
                  :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                  @click=" element.fixed=! element.fixed"
                  aria-hidden="true"
                ></i>
                {{element.name}}
                <span class="badge">{{element.order}}</span>
              </li>
            </transition-group>
          </draggable>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="col-md-3">
          <draggable
            element="span"
            v-model="list2"
            v-bind="dragOptions"
            :move="onMove"
            @start="startHandler"
            @add="addHandler"
            @remove="list2AddHandler"
            @move="moveHandler"
            @end="endHandler2"
          >
            <transition-group name="no" class="list-group" tag="ul">
              <li class="list-group-item" v-for="element in list2" :key="element.order">
                <i
                  :class="element.fixed? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'"
                  @click=" element.fixed=! element.fixed"
                  aria-hidden="true"
                ></i>
                {{element.name}}
                <span class="badge">{{element.order}}</span>
              </li>
            </transition-group>
          </draggable>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="list-group col-md-3">
          <pre>{{listString}}</pre>
        </div>
      </a-col>
      <div class="list-group col-md-3">
        <pre>{{list2String}}</pre>
      </div>
    </a-row>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
const message = ['vue.draggable', 'draggable', 'component', 'for', 'vue.js 2.0', 'based', 'on', 'Sortablejs']
export default {
  name: 'hello',
  components: {
    draggable,
  },
  data() {
    return {
      list: message.map((name, index) => {
        return { name, order: name.charAt() + Math.random().toString().substr(2), fixed: false }
      }),
      list2: [],
      editable: true,
      isDragging: false,
      delayedDragging: false,
    }
  },
  methods: {
    orderList() {
      this.list = this.list.sort((one, two) => {
        return one.order - two.order
      })
    },
    onMove({ relatedContext, draggedContext }) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
    },
    list2AddHandler(e) {
      console.log(e)
      console.log('addhandler')
    },
    addHandler(e) {
        console.log('e:', e)
        console.log('to:', e.to)
      console.log('from:', e.from)
      console.log('oldIndex:', e.oldIndex)
      console.log('newIndex:', e.newIndex)
      console.log('clone:', e.clone)
      console.log('item:', e.item)
      console.log('addHandler')
      console.log(this.list2);
    //   this.list2[e.newIndex].order2 = Math.random().toString().substr(2)
    },
    startHandler(e) {
      console.log(e)
      console.log('startHandler')
    },
    endHandler(e) {
      console.log('to:', e.to)
      console.log('from:', e.from)
      console.log('oldIndex:', e.oldIndex)
      console.log('newIndex:', e.newIndex)
      console.log('clone:', e.clone)
      console.log('item:', e.item)
      console.log('endHandler')
    },
    endHandler2(e) {
      console.log('to:', e.to)
      console.log('from:', e.from)
      console.log('oldIndex:', e.oldIndex)
      console.log('newIndex:', e.newIndex)
      console.log('clone:', e.clone)
      console.log('item:', e.item)
      console.log('endHandler2')
    },
    changeHandler(e) {
      console.log(e)
      console.log('changeHandler')
    },
    moveHandler(e) {
      console.log('to:', e.to)
      console.log('from:', e.from)
      console.log('oldIndex:', e.oldIndex)
      console.log('newIndex:', e.newIndex)
      console.log('clone:', e.clone)
      console.log('item:', e.item)
      console.log('moveHandler')
    },
  },
  computed: {
    dragOptions() {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost',
      }
    },
    dragOptions2() {
      return {
        animation: 1,
        group: { name: 'description', pull: 'clone', put: false },
        sort: false,
        disabled: !this.editable,
        ghostClass: 'ghost',
      }
    },
    listString() {
      return JSON.stringify(this.list, null, 2)
    },
    list2String() {
      return JSON.stringify(this.list2, null, 2)
    },
  },
  watch: {
    isDragging(newValue) {
      if (newValue) {
        this.delayedDragging = true
        return
      }
      this.$nextTick(() => {
        this.delayedDragging = false
      })
    },
  },
}
</script>

<style>
.flip-list-move {
  transition: transform 0.5s;
}
.no-move {
  transition: transform 0s;
}
.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
.list-group {
  min-height: 20px;
}
.list-group-item {
  cursor: move;
}
.list-group-item i {
  cursor: pointer;
}
</style>